//载入基础页面
{extend name="common/base" /}

//页面单独CSS
{block name="CustomCSS"}
{/block}

//页面单独JS
{block name="CustomJS"}
<script src="__STATIC__/vendors/js/chart/chart.min.js"></script>
<script src="__STATIC__/vendors/js/daterangepicker/moment.min.js"></script>
<script src="__STATIC__/vendors/js/daterangepicker/daterangepicker.js"></script>
<script src="//webapi.amap.com/maps?v=1.4.15&key=3f39a1d25e037650672e489d0042fd9d&"></script>
<script src="//webapi.amap.com/loca?v=1.3.2&key=3f39a1d25e037650672e489d0042fd9d"></script>
<script>

	//single date
	$('#daterange').daterangepicker({
		autoApply: true,
		locale: {
			format:'YYYY/MM/DD',
		},
		ranges: {
            '本周': [moment().startOf('week'), moment().endOf('week')],
            '本月': [moment().startOf('month'), moment().endOf('month')]
        },
        startDate: moment().startOf('month').add(-1,'month'),
        endDate: moment().endOf('month').add(-1,'month')
	});

	function GetAnalysisData(){
		$(".loader").fadeIn("slow");
		$("#preloader").delay(350).fadeIn("slow");
		var daterange = $("#daterange").val();
		$.ajax({
		    url: "{:url('Service/analysisJson')}?daterange=" + daterange,
		    method: "GET",
		    dataType : 'JSON',
		    success: function(data) {
		    	map(data.mapData);
		    	drawChart(data);
		    	$(".loader").fadeOut();
				$("#preloader").delay(350).fadeOut("slow");
		    	// console.log(data.mapData);
			},
		    error: function(data) {
		      console.log(data.mapData);
		    }
		});
	}

	function drawChart(data){
		// -------------------------------
      	//客户性别占比

      	var sexRatio_data = data.sex;

        var sexRatio_config = {
	        type: "pie",
	        data: {
	            labels: sexRatio_data.label,
	            datasets: [{
	                label: "Label",
	                backgroundColor: ["#08a6c3", "#5cb85c", "#d9534f"],
	                borderColor: ["#fff", "#fff", "#fff"],
	                hoverBorderColor: ["#fff", "#fff", "#fff"],
	                borderWidth: 2,
	                data: sexRatio_data.data
	            }]
	        },
	        options: {
	        	//图例
	            legend: {
	                display: true,
	                position: "top",
	                labels: {
	                    fontColor: "#2e3451",
	                    usePointStyle: true,
	                    fontSize: 13
	                }
	            },
	            //数据标签
	            tooltips: {
	                backgroundColor: "rgba(47, 49, 66, 0.8)",
	                titleFontSize: 13,
	                titleFontColor: "#fff",
	                caretSize: 0,
	                cornerRadius: 4,
	                xPadding: 10,
	                displayColors: true,
	                yPadding: 10
	            }
	        }
	    };

	    $('#sexRatio_canvas').remove(); // this is my <canvas> element
		$('#sexRatio_chart').append('<canvas id="sexRatio_canvas" height="350"></canvas>');

	    var a = document.getElementById("sexRatio_canvas").getContext("2d");
	    var sexRatioChart = new Chart(a, sexRatio_config);

	    // -------------------------------
      	//客户年龄层占比

      	var ageRatio_data = data.age;

        var ageRatio_config = {
	        type: "pie",
	        data: {
	            labels: ageRatio_data.label,
	            datasets: [{
	                label: "Label",
	                backgroundColor: ["#08a6c3", "#5cb85c", "#d9534f","#2d304b","#cc0000","#ff9900","#009900"],
	                borderColor: ["#fff", "#fff", "#fff", "#fff", "#fff", "#fff", "#fff"],
	                hoverBorderColor: ["#fff", "#fff", "#fff", "#fff", "#fff", "#fff", "#fff"],
	                borderWidth: 2,
	                data: ageRatio_data.data
	            }]
	        },
	        options: {
	        	//图例
	            legend: {
	                display: true,
	                position: "top",
	                labels: {
	                    fontColor: "#2e3451",
	                    usePointStyle: true,
	                    fontSize: 13
	                }
	            },
	            //数据标签
	            tooltips: {
	                backgroundColor: "rgba(47, 49, 66, 0.8)",
	                titleFontSize: 13,
	                titleFontColor: "#fff",
	                caretSize: 0,
	                cornerRadius: 4,
	                xPadding: 10,
	                displayColors: true,
	                yPadding: 10
	            }
	        }
	    };

	    $('#ageRatio_canvas').remove(); // this is my <canvas> element
		$('#ageRatio_chart').append('<canvas id="ageRatio_canvas" height="350"></canvas>');

	    var a = document.getElementById("ageRatio_canvas").getContext("2d");
	    var ageRatioChart = new Chart(a, ageRatio_config);

	    // -------------------------------
      	//客户职业占比

      	var occupationRatio_data = data.occupation;

        var occupationRatio_config = {
	        type: "pie",
	        data: {
	            labels: occupationRatio_data.label,
	            datasets: [{
	                label: "Label",
	                backgroundColor: ["#d9534f", "#5cb85c", "#08a6c3","#2d304b","#cc0000","#ff9900","#009900","#009999","#0066ff","#9933ff","#ff6699"],
	                borderColor: ["#fff", "#fff", "#fff", "#fff", "#fff", "#fff", "#fff","#fff","#fff","#fff","#fff"],
	                hoverBorderColor: ["#fff", "#fff", "#fff", "#fff", "#fff", "#fff", "#fff","#fff","#fff","#fff","#fff"],
	                borderWidth: 2,
	                data: occupationRatio_data.data
	            }]
	        },
	        options: {
	        	//图例
	            legend: {
	                display: true,
	                position: "top",
	                labels: {
	                    fontColor: "#2e3451",
	                    usePointStyle: true,
	                    fontSize: 13
	                }
	            },
	            //数据标签
	            tooltips: {
	                backgroundColor: "rgba(47, 49, 66, 0.8)",
	                titleFontSize: 13,
	                titleFontColor: "#fff",
	                caretSize: 0,
	                cornerRadius: 4,
	                xPadding: 10,
	                displayColors: true,
	                yPadding: 10
	            }
	        }
	    };

	    $('#occupationRatio_canvas').remove(); // this is my <canvas> element
		$('#occupationRatio_chart').append('<canvas id="occupationRatio_canvas" height="350"></canvas>');

	    var a = document.getElementById("occupationRatio_canvas").getContext("2d");
	    var occupationRatioChart = new Chart(a, occupationRatio_config);

	    // -------------------------------
      	//客户车型占比

      	var vehicleRatio_data = data.vehicle;

        var vehicleRatio_config = {
	        type: "pie",
	        data: {
	            labels: vehicleRatio_data.label,
	            datasets: [{
	                label: "Label",
	                backgroundColor: ["#08a6c3", "#5cb85c", "#d9534f","#2d304b","#cc0000","#ff9900","#009900"],
	                borderColor: ["#fff", "#fff", "#fff", "#fff", "#fff", "#fff", "#fff"],
	                hoverBorderColor: ["#fff", "#fff", "#fff", "#fff", "#fff", "#fff", "#fff"],
	                borderWidth: 2,
	                data: vehicleRatio_data.data
	            }]
	        },
	        options: {
	        	//图例
	            legend: {
	                display: true,
	                position: "top",
	                labels: {
	                    fontColor: "#2e3451",
	                    usePointStyle: true,
	                    fontSize: 13
	                }
	            },
	            //数据标签
	            tooltips: {
	                backgroundColor: "rgba(47, 49, 66, 0.8)",
	                titleFontSize: 13,
	                titleFontColor: "#fff",
	                caretSize: 0,
	                cornerRadius: 4,
	                xPadding: 10,
	                displayColors: true,
	                yPadding: 10
	            }
	        }
	    };

	    $('#vehicleRatio_canvas').remove(); // this is my <canvas> element
		$('#vehicleRatio_chart').append('<canvas id="vehicleRatio_canvas" height="350"></canvas>');

	    var a = document.getElementById("vehicleRatio_canvas").getContext("2d");
	    var vehicleRatioChart = new Chart(a, vehicleRatio_config);
	}

    function map(mapData){
    	var data = mapData;
    	console.log(data);
    	var map = new AMap.Map('container', {
	        mapStyle: 'amap://styles/6dac0a65c21910773df1b5b96ddb73ed',
	        zoom: 11,
	        center: [110.290194,25.273566],
	        viewMode: '2D'
	    });

	    map.plugin([
	        'AMap.ToolBar',
		    ], function(){
	        // 在图面添加工具条控件，工具条控件集成了缩放、平移、定位等功能按钮在内的组合控件
	        map.addControl(new AMap.ToolBar({
	            // 简易缩放模式，默认为 false
	            liteStyle: true
	        }));
	    });

	    var layer = new Loca.RoundPointLayer({
	        map: map,
	        fitView: true,
	    });

	    layer.setData(data, {
	        lnglat: 'lnglat',
	        type: 'json'
	    });

	    layer.setOptions({
	        style: {
	            radius: {
	                key: 'count',       // 映射字段
	                scale: 'linear',  // 比例尺
	                value: [10, 30], // 输出范围
	                input: [1, 10]    // 输入范围
	            },
	            color: '#D5556B',
	            opacity: 0.8,
	            borderWidth: 1,
	            borderColor: '#2D304B'
	        }
	    });

	    layer.render();
    }

    $(document).ready(function(){
		GetAnalysisData();
	})
</script>

{/block}

//页面名称
{block name="PageName"}
客户来源分析
{/block}

//自定义Modal
{block name="Modal"}
{/block}

//主页面
{block name="main"}
<div class="row flex-row">
	<div class="col-xl-3">
		<div class="widget widget-09 has-shadow">
            <div class="widget-header bordered no-actions d-flex align-items-center">
                <h4>查询日期范围</h4>
            </div>
            <div class="widget-body">
            	<div class="form-group row">
            		<div class="col">
	                    <label class="form-control-label">日期范围</label>
	                    <input type="text" class="form-control" id="daterange" name="daterange">
	                </div>
                </div>
                <div class="row">
                    <div class="col">
		                <div class="text-right">
		                    <button class="btn btn-gradient-01" onclick="GetAnalysisData()">确定</button>
		                </div>
		            </div>
		        </div>
            </div>
        </div>
	</div>
	<div class="col-xl-9 col-sm-12">
        <div class="widget has-shadow">
            <div class="widget-header bordered no-actions d-flex align-items-center">
                <h4>客户地理区域图</h4>
            </div>
            <div class="widget-body">
            	<div id="container" class="container" style="height: 500px;"></div>
	        </div>
	    </div>
	</div>
</div>
<div class="row flex-row">
	<div class="col-xl-3 col-sm-6">
		<!-- 客户性别占比 -->
	    <div class="widget has-shadow">
	        <div class="widget-header bordered no-actions d-flex align-items-center">
	            <h4>客户性别占比</h4>
	        </div>
	        <div class="widget-body">
	            <div class="chart" id="sexRatio_chart">
	                <canvas id="sexRatio_canvas"></canvas>
	            </div>
	        </div>
	    </div>
	    <!-- 客户性别占比 -->
	</div>
    <div class="col-xl-3 col-sm-6">
		<!-- 客户年龄层占比 -->
	    <div class="widget has-shadow">
	        <div class="widget-header bordered no-actions d-flex align-items-center">
	            <h4>客户年龄层占比</h4>
	        </div>
	        <div class="widget-body">
	            <div class="chart" id="ageRatio_chart">
	                <canvas id="ageRatio_canvas"></canvas>
	            </div>
	        </div>
	    </div>
	    <!-- 客户性别占比 -->
	</div>
	<div class="col-xl-3 col-sm-6">
		<!-- 客户职业占比 -->
	    <div class="widget has-shadow">
	        <div class="widget-header bordered no-actions d-flex align-items-center">
	            <h4>客户职业占比</h4>
	        </div>
	        <div class="widget-body">
	            <div class="chart" id="occupationRatio_chart">
	                <canvas id="occupationRatio_canvas"></canvas>
	            </div>
	        </div>
	    </div>
	    <!-- 客户职业占比 -->
	</div>
	<div class="col-xl-3 col-sm-6">
		<!-- 客户车型占比 -->
	    <div class="widget has-shadow">
	        <div class="widget-header bordered no-actions d-flex align-items-center">
	            <h4>客户车型占比</h4>
	        </div>
	        <div class="widget-body">
	            <div class="chart" id="vehicleRatio_chart">
	                <canvas id="vehicleRatio_canvas"></canvas>
	            </div>
	        </div>
	    </div>
	    <!-- 客户车型占比 -->
	</div>
</div>
{/block}
